

import React,{
    Component,
} from 'react'

import {
    StyleSheet,
    View,
    WebView,
    Dimensions,
    Platform,
    Text,
    FlatList,
    Image,
    TouchableOpacity,
    Alert
} from 'react-native';
import Tools from './Tools'
import LightManagermentSystemPage from './LightManagementSystem'
import deng from '../images/ic1.png'
import kongtiao from '../images/ic2.png'
import dianshi from '../images/ic3.png'
import yinxiang from '../images/ic12.png'
import dianfanguo from '../images/ic4.png'
import reshuiqi from '../images/ic5.png'
import men from '../images/ic6.png'
import chaunghu from '../images/ic7.png'
import tianranqi from '../images/ic8.png'
import chazuo from '../images/ic9.png'
import shexiangtou from '../images/ic10.png'
import jingbaoxitong from '../images/ic11.png'
import qubuguanbi from '../images/icall.png'
import dianhuabo from '../images/ic13.png'
var imagesArr=[deng,kongtiao,dianshi,yinxiang,dianfanguo,reshuiqi,men,chaunghu,tianranqi,chazuo,shexiangtou,jingbaoxitong,qubuguanbi,dianhuabo];
import BasePage from '../BasePage';
import {Theme, NavigationPage,TeaNavigator, ListRow, NavigationBar, Label, Toast} from 'teaset';
import CommonStyle from '../Component/CommonStyle'
import ManagePage from './ManagePage'
import PageView from '../Component/Common/PageView';
// import { observer }from 'mobx-react'
import EventStore from './EventStore';

// @observer
export default class ControlPage extends BasePage{
    constructor(props){
        super(props);
    }
    renderNavigationBar(){
        return (
            <NavigationBar
                title={'设备'}
                backgroundColor='#4195D5'
                leftView={ <NavigationBar.BackButton  onPress={() => this.navigator.pop()} />}
            />
        );
    }
    componentDidMount(){
        // alert('Hello World');

    }
    renderPage (){
        return (
            <PageView style={{flex:1, backgroundColor:'white'}} hiddenNav={true}>
                <Text style={{marginTop:CommonStyle.statusBarHeight+10,marginLeft:20}}>设备列表</Text>
                <FlatList
                data={[
                    {   key: 1,
                        device: '灯'
                }, {    key: 2,
                        device: '空调'
                },
                    {   key: 3,
                        device: '电视'          
                },
                    {   key: 4,
                        device: '音响'
                },
                    {   key: 5,
                        device: '电饭锅'
                },
                    {   key: 6,
                        device: '热水器'
                },
                    {   key: 7,
                        device: '门'
                },
                    {   key: 8,
                        device: '窗户'
                },
                {   key: 9,
                        device: '天然气'
                },
                    {   key: 10,
                        device: '插座'
                },
                    {   key: 11,
                        device: '摄像头'
                },
                    {   key: 12,
                        device: '警报系统'
                },
                {   key: 13,
                        device: '全部关闭'
                },
                    {   key: 14,
                        device: '电话薄'
                }
          ]}
          horizontal={false}
          numColumns={3}
          renderItem={ this._renderItem}
          keyExtractor={this._keyExtractor}
                />
            </PageView>
        );
    }
    _renderItem = ({item,index})=>{
        return (
            <TouchableOpacity style={styles.cellItem} onPress={
                ()=>{
                    if(index===0){
                        this.navigator.push({view:<LightManagermentSystemPage/>}); 
                    }else{
                        Alert.alert('尚未绑定网关','尚未绑定网关，无法使用场景，请先绑定网关',
                    [
                        {text:'取消', onPress:()=>{  }},
                        {text:'去绑定', onPress:()=>{  
                            this.navigator.push({view:<ManagePage/>});
                        }}
                    ])  
                    }
                }
            }>
                <Image style={styles.image } source={imagesArr[index]}/>           
                <Text style={{marginTop:5, textAlign:'center'}}>{item.device}</Text>
            </TouchableOpacity>
        );   
    }
    _keyExtractor=({item,index})=>{
        return index;
    }
}
const styles=StyleSheet.create({
    cellItem:{
        marginTop:20,
        marginLeft:40,
        width:(CommonStyle.screenwidth-160)/3,
        height:(CommonStyle.screenwidth-160)/3+20,
    },
    image:{
        width:(CommonStyle.screenwidth-160)/3,
        height:(CommonStyle.screenwidth-160)/3,
        borderRadius: 8,
    }

})